import React, { Suspense, useEffect, Fragment } from 'react';
import ReactDOM from 'react-dom';
// import { HashRouter, Switch, Route, Redirect, useHistory } from 'react-router-dom';
import { Provider } from 'react-redux';

import { HashRouter, Redirect, Route, Consumerp } from '@/component/router/Route.tsx';

import Home from '@/pages/home/Home.tsx';
import Login from '@/pages/login/Login.tsx';

import routes from '@/router/router.ts';
import { plusReady } from '@/utils/public.ts';
import store from '@/redux/store';
import { getHash, objToStringParams } from '@/utils/public';
import KeepAlive, { AliveScope } from '@/component/keepAlive/KeepAlive.js';
import './index.less';

var dpr: any = 1 / (window.devicePixelRatio || 1);
dpr = dpr.toFixed(2);

var meta: any = document.querySelector('meta[name="viewport"]');
meta.content = `width=device-width,user-scalable=no, initial-scale=${dpr}`;

var fontSize = window.innerWidth / 10;
if (window.innerWidth > 1500) {
  fontSize = 1500 / 10;
}
console.log('dpr', dpr, window.innerWidth, fontSize);
var $html: any = document.querySelector('html');
$html.style.fontSize = fontSize + 'px';

// 初始化plus
if (window.plus) {
  plusReady();
} else {
  document.addEventListener('plusready', plusReady, false);
}

const renderRouter = (routesArr: any[]) => {
  return routesArr.map((item, index: number) => {
    if (item.exact) {
      return (
        <Fragment key={item.path}>
          {/* <Route key={item.path} path={item.path}></Route> */}
          <Redirect to={item.redirect} />
        </Fragment>
      );
    }

    return (
      <Route key={item.path} path={item.path} component={item.component}>
        <KeepAlive id="item.path">
          <item.component>{item.children && renderRouter(item.children)}</item.component>
        </KeepAlive>
      </Route>
    );
  });
  // .concat(<Redirect  to="/home/index" key={'/'}></Redirect>);
};

interface App {
  [propsName: string]: any;
}
const App = (props: App) => {
  // console.log(getHash());
  if (!getHash() || getHash() === '/') {
    window.location.href = '/#/home/index';
    window.location.reload();
    return null;
  }
  return (
    <div style={{ height: '100%' }}>
      {/* <Redirect to="/home/index" /> */}
      <Route path="/home">
        <Home></Home>
      </Route>
      <Route path="/login">
        <Login></Login>
      </Route>
      {/* {renderRouter(routes)} */}
    </div>
  );
};

ReactDOM.render(
  <HashRouter>
    <Provider store={store}>
      <AliveScope>
        <App />
      </AliveScope>
    </Provider>
  </HashRouter>,
  document.getElementById('app')
);
